<template>
  <div id="manaulTest">
    <div class="up">
<!--      手动用例执行概况-->
      <div class="bg-color-black item" style="padding-left: 0.2rem" v-for="item in titleItem" :key="item.title">
        <p class="ml-0 colorBlue fw-b">{{ item.title }}</p>
        <div id="scroll" style="padding-top:0.175rem;width:0.7rem;height:0.5rem;">
          <!-- <dv-digital-flop :config="item.number"/> -->
          <p>{{ item.number.number }}</p>
        </div>
      </div>
<!--      手动用例人员执行情况-->
      <div>
        <dv-scroll-board :config="config" style="padding-top:0.15rem;font-size:0.2rem;width:5.525rem;height:2rem"/>
      </div>
    </div>
  </div>

</template>

<script>
// var manual = {}
export default {
  data() {
    return {
      // 用于手动用例执行概况
      titleItem: [
        {
          title: "总用例数",
          number: {
            number: null,
            content: "{nt}"
          }
        },
        {
          title: "通过用例数",
          number: {
            number: null,
            content: "{nt}"
          }
        },
        {
          title: "失败用例数",
          number: {
            number: null,
            content: "{nt}"
          }
        },
        {
          title: "剩余用例数",
          number: {
            number: null,
            content: "{nt}"
          }
        }
        ],
      // 用于手动用例人员执行情况
      config: {
        // 表头
        header: ["<span style='font-size:0.18rem;'>成员</span>",
          "<span style='font-size:0.18rem;'>总数</span>",
          "<span style='font-size:0.18rem;'>今天</span>",
          "<span style='font-size:0.18rem;'>昨天</span>",
          "<span style='font-size:0.18rem;'>前天</span>",
          "<span style='font-size:0.18rem;'>剩余</span>"],
        // 表头背景色
        headerBGC:'#21618C',
        // 数据
        data: [
        ],
        // headerHeight: 35,
        // 表格列宽
        columnWidth: [this.refontSize(90),this.refontSize(70),this.refontSize(70),this.refontSize(70),this.refontSize(70),],
        align: ['center'],
        // carousel: 'page',
        // waitTime: 4000,
        rowNum:3,
      }
    }
  },
  methods: {
    // 请求手动用例执行情况
    getmanual(){
      this.$http({ method: 'get',
        url: 'show/manualtest/?system='+this.$route.query.project,}).then(response => {
          // console.log(response.data)
            this.titleItem[0]["number"].number = response.data.summary.total;
            this.titleItem[1]["number"].number = response.data.summary.pass;
            this.titleItem[2]["number"].number = response.data.summary.fail;
            this.titleItem[3]["number"].number = response.data.summary.residue;
            this.titleItem={...this.titleItem}
            var adt = []
            for(var name in response.data.detail){
              var dt = []
              for (var key in response.data.detail[name]){

                dt.push("<span style='font-size:0.18rem;'>"+response.data.detail[name][key]+"</span>")
              }
              var rdt = dt.slice(0,5)
              rdt.push(dt.slice(dt.length-1,dt.length)[0])
              this.config.data.push(rdt)
              // 刷新
              this.config={...this.config}
              adt.push(dt)
            }
          },
      );
    },
  },
  mounted() {
    this.getmanual()
  }
}
</script>

<style lang="scss" scoped>
#manaulTest {
  // display: flex;
  //flex-direction: column;

  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 0.2rem;

    .item {
      border-radius: 0.0625rem;
      padding-top: 0.25rem;
      margin-top: 0.1rem;
      width: 25%;
      height: 1rem;
      // font-size: 0.235rem;
    }
    #scroll{
      color: #FFFFFF;
      font-size: 0.3rem;
      //padding-top: 0.5rem;
      padding-left: 0.1rem;
      text-align: center;
    }


  }
}


</style>